import React, { useEffect,useState,} from 'react'
import { Dispatch, bindActionCreators } from "redux"
import { connect ,useSelector} from 'react-redux'
import {MYPROPS,ALLSTATE,CLALIST,ITEMS} from "../../../types/home"
import "../../../api/home"
import * as action from "../../../store/action"
import request from '../../../request/request'
import { Sidebar, Toast,Grid, Image  } from 'react-vant';
function Classify(props:MYPROPS) {
    useEffect(()=>{
        request.get("/classList").then(res=>{
            
            props.classList(res.data.list)
        })
    },[])

    const [active, setActive] = useState(0);
    
    let classarr=useSelector((state:any)=>{
        return state.classarr
    })
  return (
    <div className='claaaify'>
<Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
        
      }}
    >
       {
        classarr&&classarr.length?classarr.map((item:CLALIST,index:number)=>{
              return   <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }}
                 title={item.title} key={index}>
<Grid border={false} columnNum={3}>
               {
                item.children&&item.children.map((it:ITEMS,inde:number)=>{
                  return   <Grid.Item key={it.id}>
                  <Image src={it.img} />
                  <p>{it.name}</p>
                </Grid.Item>
              })
               }
               </Grid>
              </Sidebar.Item>
        }) :""
      } 
     
     
    </Sidebar>
     
    </div>
  )
}

const mapStateToProps = (state: ALLSTATE) => ({
        classarr:state.classarr
})

/* const mapDispatchToProps = (dispatch: Dispatch) => ({
  return { ...bindActionCreators(action, dispatch) }
}) */
const mapDispatchToProps = (dispatch:Dispatch)=>{
  return {...bindActionCreators(action,dispatch)}
}

export default connect(mapStateToProps, mapDispatchToProps)(Classify)





